<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网页菜单</title>
		<style>
			/*去掉每个li前面点*/
			ul{
				list-style: none; /*去掉每个li前面的点*/
				}
			li{
					float:left;/*li不换行，紧跟后面---居左浮动*/
					margin-right: 10px;/*外右侧空白*/
					background-color: forestgreen;/*背景色*/
					padding: 5px 10px 5px 10px;/*内部四周留空*/ 
					color: crimson;/*字体颜色----------会被a超链接覆盖*/
					}
			li:hover{/*鼠标移入触发*/
		        background-color: #D2691E;/*移入变色*/
				}
		
			a{
				  text-decoration: none;	/*取消超链接的下划线修饰*/
				  color: antiquewhite;/*修饰字体颜色*/
				}
				
				
		</style>
	</head>
	<body>
		<h3>使用ul和li标签来实现，通过样式修饰来实现</h3>
		<h5>a标签实现超链接</h5>
		<ul>
			<li><a href="https://www.w3school.com.cn/" target="_blank">W3school</a></li>
			<li><a href="https://www.runoob.com/" target="_blank">菜鸟教程</a> </li>
			<li><a href="https://www.csdn.net/" target="_blank"> CSDN</a></li>
			<li><a href="https://segmentfault.com/" target="_blank"> 思否</a></li>
			<li><a href="http://www.tedu.cn/"target="_blank">java培优</a> </li>
		</ul>
	</body>
</html>
